import React from 'react';
import './index.less';
import {connect} from "dva";
import BaseComponent from "components/Base/BaseComponent";
import Panel from "components/Base/Panel";
import {Descriptions} from "antd";
import DataUploadStatistics from "./DataUploadStatistics";
import DataValueStatistics from "../../DataValueStatistics/components";
import DataList from "../../DataList/components";


@connect(({dataDetail, hospital, channel}) => ({dataDetail, hospital, channel}))
export default class extends BaseComponent {

  getNamespace() {
    return 'dataDetail';
  }

  componentDidMount() {

    this.getDeviceInfo();
  }

  getDeviceInfo = () =>{

    const {match} = this.props;
    const {deviceId} = match.params;

    this.dispatch({
      type: `${this.getNamespace()}/getDeviceInfo`,
      payload: {
        notice: this.showMsg,
        deviceId,
      },
    })
  }

  render() {
    const {dataDetail, match} = this.props;
    const {deviceId} = match.params;

    const {hospitalName, dayCount, monthCount, notUploadCount, lastTime, workStatus} = dataDetail.deviceInfo;
    const onlineState = workStatus === "ONLINE" ? "在线" : "离线";

    return (
      <div className="data-detail">
        {/*<h1>{deviceId}设备数据详情</h1>*/}

        <Panel title={`${deviceId}设备信息`} onRefresh={() => {
          this.getDeviceInfo();
        }}>
          <Descriptions bordered>
            <Descriptions.Item label="设备编号">{deviceId}</Descriptions.Item>
            <Descriptions.Item label="医院">{hospitalName}</Descriptions.Item>
            <Descriptions.Item label="状态">{onlineState}</Descriptions.Item>
            <Descriptions.Item label="天总数">{dayCount}</Descriptions.Item>
            <Descriptions.Item label="月总数">{monthCount}</Descriptions.Item>
            <Descriptions.Item label="未上传">{notUploadCount}</Descriptions.Item>
            <Descriptions.Item label="最后一次数据时间">{lastTime}</Descriptions.Item>
          </Descriptions>
        </Panel>

        <Panel title="天上传数据量统计" onRefresh={() => {
        }}>
          <DataUploadStatistics/>
        </Panel>

        <Panel title="检验数据" onRefresh={() => {
        }}>
          <DataList deviceId={deviceId}/>
        </Panel>

        <Panel title="检验数据变化趋势" onRefresh={() => {
        }}>
          <DataValueStatistics deviceId={deviceId}/>
        </Panel>

      </div>
    );
  }
}
